<template>
	<!-- 添加实名信息 -->
	<view class="addRealNameInformation" v-if="isShow">
		<!-- 实名信息 -->
		<view class="information-form">
			<view class="information-form-item">
				<view class="itemLabel">身份证姓名</view>
				<view class="itemInput">
					<input type="text" v-model="clearanceQuery.id_card_name" placeholder="请输入身份证姓名" style="font-size: 26rpx" />
				</view>
			</view>
			<view class="information-form-item">
				<view class="itemLabel">身份证号码</view>
				<view class="itemInput">
					<input type="text" v-model="clearanceQuery.id_card" placeholder="请输入身份证号码" style="font-size: 26rpx" />
				</view>
			</view>

			<view class="uploadImage">
				<view class="uploadImage-item">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="1" height="100">
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" style="height: 100px; width: 300rpx"></image>
					</u-upload>
				</view>
				<view class="uploadImage-item">
					<u-upload :fileList="fileLists" @afterRead="afterReads" @delete="deletePics" :maxCount="1" height="100">
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" style="height: 100px; width: 300rpx"></image>
					</u-upload>
				</view>
			</view>
		</view>

		<view class="subButton" @click="getuserCustomsClearance">
			<button type="primary" style="background-color: #e43927">
				{{ clearanceInfo ? '保存编辑' : '认证' }}
			</button>
		</view>
	</view>
</template>

<script>
import { userCustomsClearance, userGetCustomsClearance } from '../../api/home/index.js';
import { BASE_URL } from '../../api/baseurl.js';
import { imageUrl, validateIDCard } from '../../utils/tools.js';
export default {
	data() {
		return {
			fileList: [],
			fileLists: [],
			value: 0,
			clearanceQuery: {
				id_card_name: '',
				id_card: '',
				id_card_front_image: '',
				id_card_reverse_image: ''
			},
			tokenValue: '',
			clearanceInfo: null,
			isShow: false
		};
	},
	async onLoad() {
		this.tokenValue = (await uni.getStorageSync('token')) || '';
		this.getuserGetCustomsClearance();
	},
	methods: {
		//图片上传
		afterRead(file, lists, name) {
			let filePath = file.file.url;
			uni.uploadFile({
				url: BASE_URL + 'common/upload',
				filePath: filePath,
				name: 'file',
				header: { token: this.tokenValue },
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data);
					this.fileList.push({
						url: imageUrl(path.data.url)
					});
				}
			});
		},

		//图片删除
		deletePic(file, lists, name) {
			this.fileList = [];
		},

		//图片上传
		afterReads(file, lists, name) {
			let filePath = file.file.url;
			uni.uploadFile({
				url: BASE_URL + 'common/upload',
				filePath: filePath,
				name: 'file',
				header: { token: this.tokenValue },
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data);
					this.fileLists.push({
						url: imageUrl(path.data.url)
					});
				}
			});
		},

		//图片删除
		deletePics(file, lists, name) {
			this.fileLists = [];
		},

		// 获取请关信息
		async getuserGetCustomsClearance() {
			try {
				const resData = await userGetCustomsClearance();
				if (resData.data) {
					this.clearanceInfo = resData.data;
					this.clearanceQuery = {
						id_card_name: this.clearanceInfo.name,
						id_card: this.clearanceInfo.idcard,
						id_card_front_image: this.clearanceInfo.front,
						id_card_reverse_image: this.clearanceInfo.reverse
					};
					this.fileList[0] = {
						url: imageUrl(this.clearanceInfo.front)
					};
					this.fileLists[0] = {
						url: imageUrl(this.clearanceInfo.reverse)
					};
				}
			} catch (e) {
				throw Error(e);
			} finally {
				this.isShow = true;
			}
		},

		async getuserCustomsClearance() {
			try {
				if (!this.clearanceQuery.id_card_name) {
					return uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
				}

				if (!this.clearanceQuery.id_card) {
					return uni.showToast({
						title: '身份证号不能为空',
						icon: 'none'
					});
				}

				if (!validateIDCard(this.clearanceQuery.id_card)) {
					return uni.showToast({
						title: '身份证号格式不正确',
						icon: 'none'
					});
				}

				if (this.fileList.length == 0) {
					return uni.showToast({
						title: '请上传身份证正面图片',
						icon: 'none'
					});
				}

				if (this.fileLists.length == 0) {
					return uni.showToast({
						title: '请上传身份证反面图片',
						icon: 'none'
					});
				}

				this.clearanceQuery.id_card_front_image = this.fileList[0].url;
				this.clearanceQuery.id_card_reverse_image = this.fileLists[0].url;
				const resData = await userCustomsClearance(this.clearanceQuery);
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(-1);
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.addRealNameInformation {
	box-sizing: border-box;
	padding: 20rpx;
	.information-form {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 26rpx;
		.information-form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			border-bottom: 1px #f3f3f3 solid;
			.itemLabel {
				font-weight: bold;
			}

			.itemInput {
				text-align: right;
			}
		}

		.uploadImage {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			.uploadImage-item {
				flex: 1;
				.uploads {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.acquiesce {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		.acquiesce-left {
			flex: 1;
			.acquiesce-left-title {
				margin-bottom: 20rpx;
			}

			.acquiesce-left-des {
				font-size: 24rpx;
				color: #999;
			}
		}

		acquiesce-right {
			width: 150rpx;
		}
	}

	.subButton {
		margin-top: 20rpx;
	}
}

::v-deep .u-upload__wrap {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

::v-deep .u-upload__wrap__preview__image {
	width: 100% !important;
}
</style>
